import React, { useEffect, useState } from 'react'
import { Table, message, Form, Space, Tag, Button, Modal, Drawer, Checkbox, Input, Radio, Card, Pagination } from "antd"
import type { ColumnsType } from 'antd/es/table';
import { SearchOutlined, EditOutlined, CloseOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import api from '@/api'
import TextArea from 'antd/es/input/TextArea';

export default function Serveclass() {
    const [vacationList, setVacationList] = useState([])
    const [total, setTotal] = useState()
    const [query, setQuery] = useState({
        pageSize: 6,
        currentPage: 1
    })
    useEffect(() => {
        getvacationlist(query)
    }, [])

    const getvacationlist = async (params: any) => {
        const res = await api.vacation.getAllLeave(params)
        console.log("获取全部分了", res.data);
        setTotal(res.data.total)
        setVacationList(res.data.data)

    }
    const updateState1 = async (arg: any, state: number) => {
        console.log("arg", arg);
        const res = await api.vacation.updateLeave({ id: arg.id, state })
        if (res.data.code == 200) {
            message.success(res.data.msg)
            getvacationlist(query)
        } else {
            message.error(res.data.msg)
        }
    }
    const updateState2 = async (arg: any, state: number) => {
        console.log("arg", arg);
        const res = await api.vacation.updateLeave({ id: arg.id, state })
        if (res.data.code == 200) {
            message.success(res.data.msg)
            getvacationlist(query)
        } else {
            message.error(res.data.msg)
        }
    }
    const columns: ColumnsType<any> = [
        {
            title: '员工id',
            dataIndex: 'serveid',
        },
        {
            title: '请假原因',
            dataIndex: 'detail',
        },
        {
            title: '请假时间',
            dataIndex: 'time',
        },
        {
            title: '状态(0:未审查1:批准2:不批准)',
            dataIndex: 'state',
            render: (text, record) => (
                <>
                    {
                        record.state === "0" ? <>未审查</> : (record.state === "1" ? <>批准</> : (record.state === "2" ? <>不批准</> : <>状态错误</>))
                    }
                </>
            )
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (text, record, index) => (

                <>
                    {
                        record.state == 0 ?
                            <Space size="middle">
                                <Button type="primary" icon={<EditOutlined />} onClick={() => updateState1(record, 1)} style={{ margin: '0 2px' }}>批准</Button>
                                <Button type="primary" icon={<EditOutlined />} onClick={() => updateState2(record, 2)} style={{ margin: '0 2px' }}>不批准</Button>
                            </Space> : <>已审核</>
                    }
                </>
            ),
        },
    ];
    function pageChange(args: any) {
        getvacationlist({ ...query, currentPage: args })
        setQuery({ ...query, currentPage: args })
    }
    return (
        <div>
            <Card>
            {
                vacationList ? <>
                    <Table columns={columns} dataSource={vacationList} rowKey="id" pagination={false} />
                    <Pagination total={total} current={query.currentPage} pageSize={query.pageSize} onChange={pageChange}></Pagination>
                </> : <></>
            }
            </Card>
        </div>
    )
}
